<%--
  Created by IntelliJ IDEA.
  User: mona
  Date: 2020/5/30
  Time: 19:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>车身参数管理</title>
    <link rel="shortcut icon" href="#"/>
    <link rel="stylesheet" href="../element-ui/element.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/cln/css/engine.css">
</head>
<body>
<script src="../../vue/vue.js"></script>
<script src="../../vue/vue.min.js"></script>
<script src="../element-ui/element.js"></script>
<script src="../../jquery/jquery-3.4.1.js"></script>
<div id="app">
    <template>
        <el-row :gutter="24">
            <el-col :span="22" :offset="1">
                <div class="pro">
                    <%--
                        :header-cell-style="thStyleFun"  表头样式
                        :cell-style="cellStyleFun"  每一个单元格样式
                     --%>
                    <el-table :data="list" style="width: 100%;margin: 0 auto;" :header-cell-style="thStyleFun"
                              :cell-style="cellStyleFun">
                        <el-table-column label="车身参数编号" prop="bodyId" width="70px"></el-table-column>
                        <el-table-column label="车长" prop="carLong" width="90px">
                            <template slot-scope="scope">
                                {{scope.row.carLong}}mm
                            </template>
                        </el-table-column>
                        <el-table-column label="车宽" prop="carWidth" width="90px">
                            <template slot-scope="scope">
                                {{scope.row.carWidth}}mm
                            </template>
                        </el-table-column>
                        <el-table-column label="车高" prop="carHeight" width="90px">
                            <template slot-scope="scope">
                                {{scope.row.carHeight}}mm
                            </template>
                        </el-table-column>
                        <el-table-column label="轴距" prop="smallspace" width="70px"></el-table-column>
                        <el-table-column label="最小离地间隙" prop="frontspace" width="70px"></el-table-column>
                        <el-table-column label="前轮距" prop="frontspace" width="70px"></el-table-column>
                        <el-table-column label="后轮距" prop="rearspace" width="70px"></el-table-column>
                        <el-table-column label="车身结构" prop="structure" width="110px"></el-table-column>
                        <el-table-column label="车门数" prop="door" width="70px"></el-table-column>
                        <el-table-column label="座位数" prop="seat" width="70px"></el-table-column>
                        <el-table-column label="油箱容积" prop="oilspace" width="90px">
                            <template slot-scope="scope">
                                {{scope.row.oilspace}}L
                            </template>
                        </el-table-column>
                        <el-table-column label="行李箱最小容积" prop="minisize" width="80px"></el-table-column>
                        <el-table-column label="行李箱最大容积" prop="bigsize" width="80px"></el-table-column>
                        <el-table-column align="right">
                            <template slot="header" slot-scope="scope">
                                <el-button @click="dialogFormVisible = true">添加车身参数</el-button>
                            </template>
                            <template slot-scope="scope">
                                <el-row :gutter="24">
                                    <el-col :span="12">
                                        <el-button size="mini" @click="showBody(scope.row)">Edit</el-button>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-button size="mini" type="danger" @click="deleteBody(scope.$index, scope.row)">
                                            Delete
                                        </el-button>
                                    </el-col>
                                </el-row>
                            </template>
                        </el-table-column>
                    </el-table>

                    <!--分页-->
                    <div class="block">
                        <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page.sync="pageNum"
                                :page-size="pageSize"
                                :pager-count="4"
                                layout="prev, pager, next, jumper"
                                :total="total">
                        </el-pagination>
                    </div>
                    <!--添加车身参数弹框-->
                    <el-dialog title="添加车身参数" :visible.sync="dialogFormVisible" width="30%">
                        <el-form :model="{form}">
                            <el-form-item label="车长" :label-width="formLabelWidth">
                                <el-input v-model="form.carLong"></el-input>
                            </el-form-item>
                            <el-form-item label="车宽" :label-width="formLabelWidth">
                                <el-input v-model="form.carWidth" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="车高" :label-width="formLabelWidth">
                                <el-input v-model="form.carHeight" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="轴距" :label-width="formLabelWidth">
                                <el-input v-model="form.wheelbase" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="最小离地间隙" :label-width="formLabelWidth">
                                <el-input v-model="form.smallspace" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="前轮距" :label-width="formLabelWidth">
                                <el-input v-model="form.frontspace" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="后轮距" :label-width="formLabelWidth">
                                <el-input v-model="form.rearspace" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="车身结构" :label-width="formLabelWidth">
                                <el-input v-model="form.structure" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="车门数" :label-width="formLabelWidth">
                                <el-input v-model="form.door" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="座位数" :label-width="formLabelWidth">
                                <el-input v-model="form.seat" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="油箱容积" :label-width="formLabelWidth">
                                <el-input v-model="form.oilspace" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="行李箱最小容积" :label-width="formLabelWidth">
                                <el-input v-model="form.minisize" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="行李箱最大容积" :label-width="formLabelWidth">
                                <el-input v-model="form.bigsize" autocomplete="off"></el-input>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button type="primary" @click="onSubmit">确 定</el-button>
                            <el-button @click="dialogFormVisible = false">取 消</el-button>
                        </div>
                    </el-dialog>

                    <!--修改车身参数弹框-->
                    <!--:model需要的是object型，若model报错，可以加个{}-->
                    <el-dialog title="修改车身参数" :visible.sync="dialogFormVisible1" width="30%">
                        <el-form :model="{getlist}">
                            <el-form-item label="车长" :label-width="formLabelWidth">
                                <el-input v-model="getlist.carLong"></el-input>
                            </el-form-item>
                            <el-form-item label="车宽" :label-width="formLabelWidth">
                                <el-input v-model="getlist.carWidth"></el-input>
                            </el-form-item>
                            <el-form-item label="车高" :label-width="formLabelWidth">
                                <el-input v-model="getlist.carHeight"></el-input>
                            </el-form-item>
                            <el-form-item label="轴距" :label-width="formLabelWidth">
                                <el-input v-model="getlist.wheelbase"></el-input>
                            </el-form-item>
                            <el-form-item label="最小离地间隙" :label-width="formLabelWidth">
                                <el-input v-model="getlist.smallspace"></el-input>
                            </el-form-item>
                            <el-form-item label="前轮距" :label-width="formLabelWidth">
                                <el-input v-model="getlist.frontspace"></el-input>
                            </el-form-item>
                            <el-form-item label="后轮距" :label-width="formLabelWidth">
                                <el-input v-model="getlist.rearspace"></el-input>
                            </el-form-item>
                            <el-form-item label="车身结构" :label-width="formLabelWidth">
                                <el-input v-model="getlist.structure"></el-input>
                            </el-form-item>
                            <el-form-item label="车门数" :label-width="formLabelWidth">
                                <el-input v-model="getlist.door"></el-input>
                            </el-form-item>
                            <el-form-item label="座位数" :label-width="formLabelWidth">
                                <el-input v-model="getlist.seat"></el-input>
                            </el-form-item>
                            <el-form-item label="油箱容积" :label-width="formLabelWidth">
                                <el-input v-model="getlist.oilspace"></el-input>
                            </el-form-item>
                            <el-form-item label="行李箱最小容积" :label-width="formLabelWidth">
                                <el-input v-model="getlist.minisize"></el-input>
                            </el-form-item>
                            <el-form-item label="行李箱最大容积" :label-width="formLabelWidth">
                                <el-input v-model="getlist.bigsize"></el-input>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button type="primary" @click="editBody">确 定</el-button>
                            <el-button @click="dialogFormVisible1 = false">取 消</el-button>
                        </div>
                    </el-dialog>
                </div>
            </el-col>
        </el-row>
    </template>
</div>
</body>
<script>
    var Main = {
        data() {
            return {
                list: [],
                getlist: [],
                search: '',
                dialogFormVisible: false,
                dialogFormVisible1: false,
                form: {},
                formLabelWidth: '120px',
                total: 1,//总条数  默认值不能为空
                pageSize: 6,//每页显示几条数据
                pageNum: 1,//当前页
                pages: 1,//总页数
                startRow: '',//起始页
                endRow: '',//结束页
                fileList: [],//上传文件列表
                formdata: new FormData(),
                bodyId: ''
            }
        },
        created() {
            this.getBody();
        },
        methods: {
            // 获取发动机
            getBody() {
                var _this = this;
                $.ajax({
                    type: 'get',
                    url: '/forum/body/selectAllBody',
                    dataType: 'json',
                    data: "pageNum=" + this.pageNum + "&pageSize=" + this.pageSize,
                    success: function (data) {
                        console.log(data.data);
                        if (data.state === '200') {
                            _this.list = data.data.list;
                            _this.getlist = data.data.list;
                            _this.pageNum = data.data.pageNum;//当前页码
                            _this.total = data.data.total;//总条数
                            _this.pages = data.data.pages;//总页数
                        }
                    }
                })
            },
            thStyleFun() {
                return 'text-align:center'
            },
            cellStyleFun() {
                return 'text-align:center'
            },

            //删除发动机
            deleteBody(index, row) {
                var that = this;
                console.log(index, row);
                $.ajax({
                    method: 'post',
                    url: '/forum/body/deleteBody',
                    data: {
                        bodyId: row.bodyId,
                    },
                    success: function (data) {
                        if (data.state === '200') {
                            console.log(data);
                            that.$message({
                                message: "删除成功",
                                type: "success"
                            });
                            window.location.reload();
                        } else {
                            that.$message.error('删除失败');
                        }
                    }
                })
            },
            //element行点击方法  获取该行数据
            showBody(row) {
                var _this = this;
                _this.dialogFormVisible1 = true;
                _this.bodyId = row.bodyId;
                console.log(_this.bodyId);
                _this.getlist = row;
            },
            //添加 （表单提交）
            onSubmit() {
                var _this = this;
                _this.dialogFormVisible = false;
                console.log("表单提交了！", _this.form);
                _this.addBody();
            },
            //添加发动机
            addBody() {
                var _this = this;
                $.ajax({
                    method: 'post',
                    url: '/forum/body/insertBody',
                    data: {
                        bodyId: _this.bodyId,
                        carLong: _this.form.carLong,
                        carWidth: _this.form.carWidth,
                        carHeight: _this.form.carHeight,
                        wheelbase: _this.form.wheelbase,
                        smallspace: _this.form.smallspace,
                        frontspace: _this.form.frontspace,
                        rearspace: _this.form.rearspace,
                        structure: _this.form.structure,
                        door: _this.form.door,
                        seat: _this.form.seat,
                        oilspace: _this.form.oilspace,
                        minisize: _this.form.minisize,
                        bigsize: _this.form.bigsize
                    },
                    success: function (data) {
                        // console.log(data)
                        if (data.state === '200') {
                            _this.dialogFormVisible = false;
                            _this.$message({
                                message: "添加成功",
                                type: "success"
                            });
                            window.location.reload();
                        } else {
                            _this.$message.error('添加失败');
                        }
                    }
                })
            },
            //修改发动机
            editBody() {
                var that = this;
                $.ajax({
                    method: 'post',
                    url: '/forum/body/updateBody',
                    data: {
                        bodyId: that.bodyId,
                        carLong: that.getlist.carLong,
                        carWidth: that.getlist.carWidth,
                        carHeight: that.getlist.carHeight,
                        wheelbase: that.getlist.wheelbase,
                        smallspace: that.getlist.smallspace,
                        frontspace: that.getlist.frontspace,
                        rearspace: that.getlist.rearspace,
                        structure: that.getlist.structure,
                        door: that.getlist.door,
                        seat: that.getlist.seat,
                        oilspace: that.getlist.oilspace,
                        minisize: that.getlist.minisize,
                        bigsize: that.getlist.bigsize
                    },
                    success: function (data) {
                        console.log(data);
                        if (data.state === '200') {
                            that.dialogFormVisible1 = false;
                            that.$message({
                                message: "修改成功",
                                type: "success"
                            });
                        } else {
                            that.$message.error('修改失败');
                        }
                    }
                })
            },
            //每页显示几条
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.getBody()
            },
            //当前页
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.getBody()
            }
        }
    };
    var Ctor = Vue.extend(Main);
    new Ctor().$mount("#app");
</script>
</html>
